<template>
  <div class="login-body">
    <div class="login-animate"></div>
    <div class="login-form-wrap">
      <h3 class="login-title">欢迎登录</h3>
      <p class="sys-title">消防应急管理系统</p>
      <el-form
        ref="loginForm"
        :model="ruleForm"
        :rules="rules"
        class="login-form"
        auto-complete="on"
        label-position="left"
        @submit.native.prevent
      >
        <el-form-item prop="userAccount">
          <el-input v-model="ruleForm.userAccount" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <br />
        <br />
        <el-form-item prop="userPassword">
          <el-input
            type="password"
            show-password
            v-model="ruleForm.userPassword"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            :loading="loading"
            type="primary"
            style="width:100%;"
            @click="submitForm(ruleForm)"
          >登录</el-button>
        </el-form-item>
        <div class="tips"></div>
      </el-form>
    </div>
  </div>
</template>
<script>
import { login } from "../api/login";
export default {
  data() {
    return {
      rules: {
        userAccount: [
          { required: true, message: "请输入账号", trigger: "blur" }
        ],
        userPassword: [
          { required: true, message: "请输入密码", trigger: "blur" }
        ]
      },
      isAIO: "111",
      /*  TODO通过是否记住密码给输入框赋值  */
      ruleForm: {
        userAccount: "",
        userPassword: ""
      },
      loginRules: {},
      loading: false,
      pwdType: "password",
      redirect: undefined,
      dialogForgetPsw: false,
      forgetPswForm: {
        tel: "",
        code: "",
        newPassword: "",
        againPsw: ""
      },
      forgetPswRules: {},
      disabled: false,
      verifyCodeButtonType: "primary",
      time: "发送验证码",
      platformCode: 1111,
      logoSrc: ""
    };
  },
  methods: {
    //获取info列表
    submitForm(formName) {
      login(formName).then(res => {
        if (res.flag) {
          this.detailVisible = true;
          this.$store.commit("LOGIN_IN", res.Authorization);
          sessionStorage.setItem("sysuser", JSON.stringify(res.user));
          setTimeout(() => {
            this.logining = false;
            this.$router.push({ path: "/xiaofang/userInfo" });
          }, 1000);
        } else {
          this.$message.error(res.msg);
        }
      });
    }
  }
};
</script>

<style scoped>
.login-body {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(../assets/img/main.png) center 0 no-repeat;
}
.login-form {
  margin-top: 30px;
}

.forget {
  margin-bottom: 15px;
  padding-right: 10px;
  text-align: right;
  color: #666;
}
.login-title {
  cursor: default;
  letter-spacing: 1px;
  margin: 20px 0 0 0;
  line-height: 30px;
  font-size: 30px;
  color: #205ea7;
}
.login-form-wrap {
  position: absolute;
  top: 180px;
  right: 10%;
  padding: 20px;
  width: 360px;
  height: 370px;
  background: #fff;
  border: 1px solid #bdbdbd;
  border-radius: 3px;
  box-sizing: border-box;
}
.sys-title {
  letter-spacing: 1px;
  cursor: default;
  margin: 15px 0 0 0;
  line-height: 22px;
  font-size: 22px;
  color: #666;
}
</style>